<template>
  <el-card :body-style="{ padding: '10px' }" shadow="hover" style="border: 0">
    <div slot="header">
      <span style="color: rgb(236,232,237)">值班管理</span>
      <el-button type="text" style="color: rgb(216,223,234)"
                 class="shift-lookMoreBtn"
                 @click="goview('值班管理')">
        查看更多...
      </el-button>
    </div>
    <div style="margin:0.5vh auto;">
      <el-row class="dutyRow" type="flex" justify="center">
        <el-col :span="6" v-for="(person, index) in chiefDutyList" :key="index" style="padding: 5px;">
          <el-card class="classMngCard" :body-style="{ padding: '0px' }">
            <el-image :src="person.url" class="image" fit="fill"></el-image>
            <el-row :gutter="0" style="height: 1.8vh">
              <div style="font-size: 0.5vw" class="contentTextCenter">
                <span style="color: rgb(236,232,237);margin-left: 1px">{{person.name}}</span>
              </div>
            </el-row>
            <el-row :gutter="0" style="font-size: 0.5vw" class="contentTextCenter">
              <el-col :span="16">
                <div style="font-size: 0.4vw" class="contentTextCenter">
                  <span style="color: rgb(236,232,237)">{{person.position}}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <img v-show="person.duty==='白'" style="width: 70%;height: 70%" src="@/assets/img/duty/白班.png">
                <img v-show="person.duty==='夜'" style="width: 70%;height: 70%" src="@/assets/img/duty/夜班.png">
                <img v-show="person.duty==='上'" style="width: 70%;height: 70%" src="@/assets/img/duty/长白班.png">
                <img v-show="person.duty==='无'" style="width: 70%;height: 70%" src="@/assets/img/duty/无.png">
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="dutyRow" type="flex" justify="center">
        <el-col :span="6" v-for="(person, index) in dutyList1" :key="index" style="padding: 5px;">
          <el-card class="classMngCard" :body-style="{ padding: '0px' }">
            <el-image :src="person.url" class="image" fit="fill"></el-image>
            <el-row :gutter="0" style="height: 1.8vh">
              <div style="font-size: 0.4vw" class="contentTextCenter">
                <span style="color: rgb(236,232,237);margin-left: 1px">{{person.name}}</span>
              </div>
            </el-row>
            <el-row :gutter="0" style="font-size: 0.5vw" class="contentTextCenter">
              <el-col :span="16">
                <div style="font-size: 0.4vw" class="contentTextCenter">
                  <span style="color: rgb(236,232,237)">{{person.position}}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <img v-show="person.duty==='白'" style="width: 70%;height: 70%" src="@/assets/img/duty/白班.png">
                <img v-show="person.duty==='夜'" style="width: 70%;height: 70%" src="@/assets/img/duty/夜班.png">
                <img v-show="person.duty==='上'" style="width: 70%;height: 70%" src="@/assets/img/duty/长白班.png">
                <img v-show="person.duty==='无'" style="width: 70%;height: 70%" src="@/assets/img/duty/无.png">
              </el-col>
            </el-row>
          </el-card>
<!--          <el-card class="classMngCard" :body-style="{ padding: '0px' }">-->
<!--            <el-image :src="person.url" class="image" fit="fill"></el-image>-->
<!--            <div :class="formatTagType(person.duty)" class="classStaffStatus">-->
<!--              {{person.duty}}-->
<!--            </div>-->
<!--            <div style="font-size: 1vh" class="contentTextCenter">-->
<!--              <span>{{person.position}}</span>-->
<!--            </div>-->
<!--            <div style="font-size: 1.2vh" class="contentTextCenter">-->
<!--              <span>{{person.name}}</span>-->
<!--            </div>-->
<!--          </el-card>-->
        </el-col>
      </el-row>
      <el-row class="dutyRow" type="flex" justify="center">
        <el-col :span="6" v-for="(person, index) in dutyList2" :key="index" style="padding: 5px;">
          <el-card class="classMngCard" :body-style="{ padding: '0px' }">
            <el-image :src="person.url" class="image" fit="fill"></el-image>
            <el-row :gutter="0" style="height: 1.8vh">
              <div style="font-size: 0.4vw" class="contentTextCenter">
                <span style="color: rgb(236,232,237);margin-left: 1px">{{person.name}}</span>
              </div>
            </el-row>
            <el-row :gutter="0" style="font-size: 0.5vw" class="contentTextCenter">
              <el-col :span="16">
                <div style="font-size: 0.4vw" class="contentTextCenter">
                  <span style="color: rgb(236,232,237)">{{person.position}}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <img v-show="person.duty==='白'" style="width: 90%;height: 90%" src="@/assets/img/duty/白班.png">
                <img v-show="person.duty==='夜'" style="width: 90%;height: 90%" src="@/assets/img/duty/夜班.png">
                <img v-show="person.duty==='上'" style="width: 90%;height: 90%" src="@/assets/img/duty/长白班.png">
                <img v-show="person.duty==='无'" style="width: 90%;height: 90%" src="@/assets/img/duty/无.png">
              </el-col>
            </el-row>
          </el-card>
          <!--          <el-card class="classMngCard" :body-style="{ padding: '0px' }">-->
          <!--            <el-image :src="person.url" class="image" fit="fill"></el-image>-->
          <!--            <div :class="formatTagType(person.duty)" class="classStaffStatus">-->
          <!--              {{person.duty}}-->
          <!--            </div>-->
          <!--            <div style="font-size: 1vh" class="contentTextCenter">-->
          <!--              <span>{{person.position}}</span>-->
          <!--            </div>-->
          <!--            <div style="font-size: 1.2vh" class="contentTextCenter">-->
          <!--              <span>{{person.name}}</span>-->
          <!--            </div>-->
          <!--          </el-card>-->
        </el-col>
      </el-row>

      <el-row style="height: 2vh;margin-top: 5px;margin-left: 10px;color: #8c939d">
        <el-col :span="6" style="font-size: 12px">
          <img style="width: 10%;height: 10%" src="@/assets/img/duty/白班.png">：白班
        </el-col>
        <el-col :span="6" style="font-size: 12px">
          <img style="width: 10%;height: 10%" src="@/assets/img/duty/夜班.png">：夜班
        </el-col>
        <el-col :span="6" style="font-size: 12px">
          <img style="width: 10%;height: 10%" src="@/assets/img/duty/长白班.png">：常白班
        </el-col>
        <el-col :span="6" style="font-size: 12px">
          <img style="width: 10%;height: 10%" src="@/assets/img/duty/无.png">：小休
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import request from '@/network/request'
import { baseURL } from '../../../../../config/baseConfig'
export default {
  name: 'shiftManagement',
  data () {
    return {
      dutyTableOfHomePage: [],
      chiefDutyList: [], // 总值长
      dutyList1: [], // 值长
      dutyList2: [] // 主值
    }
  },
  created () {
    this.getSeparatedTable()
  },
  methods: {
    getSeparatedTable () {
      request({
        method: 'post',
        url: 'crew/getcrewstatus',
        params: {
        }
      }).then(res => {
        // console.log(res.data.data)
        this.dutyTableOfHomePage = res.data.data
        // console.log(this.dutyTableOfHomePage)
        this.dutyTableOfHomePage.forEach(person => {
          // console.log(person)
          person.url = baseURL + '/' + person.url
          // console.log('shift ' + person.url)
          if (person.duty === ' ') {
            person.duty = '无'
          }
          setTimeout(() => {
            if (person.position === '总值长') {
              this.chiefDutyList.push(person)
            } else if (person.position === '值长') {
              this.dutyList1.push(person)
            } else if (person.position === '主值') {
              this.dutyList2.push(person)
            }
          }, 20)
        })
        // console.log('总值长')
        // console.log(this.chiefDutyList)
        // console.log('值长与主值')
        // console.log(this.dutyList)
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    // formatTagType (status) {
    //   if (status === '上') {
    //     return 'up'
    //   } else if (status === '白') {
    //     return 'day'
    //   } else if (status === '夜') {
    //     return 'night'
    //   } else {
    //     return 'empty'
    //   }
    // },
    goview (name) {
      this.$router.push({ name }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    }
  }
}
</script>
<style scoped>
  .el-card{
    height: 100%;
    border: 0;
    border-radius: 0;
    background-color: #e5e9f2;
  }
  .el-card /deep/ .el-card__header {
    height: 10%;
    padding: 1vh 1vw;
    border-bottom: 0;
    box-sizing: border-box;
    background-color: rgb(112,55,103);
    color: white;
  }
  .el-card /deep/ .el-card__body {
    /*border: RGB(63, 70, 94) solid 1px;*/
    height: 100%;
    color: #d3dce6;
    /*background-color: RGB(46, 52, 76);*/
  }
.duty-lookMoreBtn {
  float: right;
  padding: 0.2vh 0;
  color: white;
  font-size: 0.9em
}
.dutyRow {
  height: 40%;
}
  /*.up {*/
  /*  color: white;*/
  /*  border-color: #1E90FF;*/
  /*  background: rgba(30, 144, 255, 0.4);*/
  /*}*/
  /*.day {*/
  /*  color: #EEEE00;*/
  /*  border-color: #EEEE00;*/
  /*  background: rgba(199, 174, 116, 0.4);*/
  /*}*/
  /*.night {*/
  /*  color: #acacac;*/
  /*  background: rgba(0, 0, 0, 0.4);*/
  /*  border-color: #acacac;*/
  /*}*/
  /*.empty {*/
  /*  color: white;*/
  /*  background: rgba(255, 255, 255, 0.4);*/
  /*  border-color: #acacac;*/
  /*}*/
  .image {
    margin: 0.5vh auto;
    width: 2.5vw;
    height: 6vh;
    display: block;
  }
  .classStaffStatus {
    width: 1.5vw;
    margin: 0.5vh auto;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    padding: 0.1vh 0;
    font-size: 1vh;
    text-align: center;
  }
  .classMngCard {
    border: 1px solid rgba(42, 85, 102, 0.4);
    height: 100%;
    /*background-color: RGB(46, 52, 76);*/
  }
  .contentTextCenter {
    padding-left: 1px;
    text-align: left;
  }
  .shift-lookMoreBtn {
     float: right;
     padding: 0.2vh 0;
     color: white;
     font-size: 0.9em
   }
</style>
